import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import detailData from "../../assets/data/detailData";
import close from "../../assets/img/close.png";
import title from "./../../assets/img/title.png";
import our from "./../../assets/img/detail/page-our.svg";

function DetailOur(props = {}) {
  const { data = [] } = props;
  let navigate = useNavigate();
  const { search = "" } = useLocation();

  const searchId = search.split("=")[1];
  const { detailList, color, barMargin, bgColor } = detailData().DetailOur;

  function pathSwitch(path = `/`) {
    navigate(path);
  }

  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: "40px", zIndex: 3, position: "relative" }}>
        <div className="cloud cloud-l page-cloud-l"></div>
        <div className="cloud cloud-m page-cloud-m"></div>
        <div className="cloud cloud-r page-cloud-r"></div>
        <img
          alt=""
          className="left-ban"
          style={{ position: "fixed", top: "280px", width: "200px" }}
          src={our}
        ></img>
        <div style={{ display: "flex", width: "50%", margin: "auto" }}>
          <div style={{ margin: "0 20px" }}>
            <div style={{ display: "flex" }}>
              <img
                alt=""
                src={title}
                style={{ width: "550px", height: "220px", marginTop: "200px" }}
              />
              <img
                alt=""
                src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg.png"}
                style={{ width: "15vw", height: "30vh", marginTop: "80px" }}
              />
            </div>
            <div className="page-item" style={{ marginTop: "40px" }}>
              <a name={"0"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[0].title}
              </h2>
              <p className="page-item-info">
                隨著香港人生育率持續下降，晚婚或不育人數不斷上升，公眾對生育健康資訊和的需求日漸增加。為此，香港大學知識交流辦公室撥款予香港大學社會工作及社會行政學系陳凱欣教授之團隊，於2024年開展「生」涯規劃-生育健康資訊平台計劃，透過網站及公眾教育活動，協助改善社區大眾對生育議題的了解，讓他們可以在充份知情下作出合適的選擇，提升他們的生活質素，長遠解決香港的生育率下降的問題。
              </p>
              <p className="page-item-info">
                「生」涯規劃-生育健康資訊平台計劃結合跨界別力量，聯繫香港大學社會工作及社會行政學系、香港大學瑪麗醫院輔助生育中心、中環街市、本地插畫師及社區，以一系列的線下活動來令大眾增加對不同的生育議題的了解。該項目旨在將過往對香港大眾關於生育、生育意識以及生育態度的研究轉化為一站式信息提供平台，以提升市民對生育的認知、減少對生育議題的誤解，以及幫助大眾進行生育抉擇。此平台內容包括基本生育知識、拆解生育迷思、生育自我探索、以及面對生育壓力。
              </p>
            </div>
            <div className="page-item">
              <a name={"1"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[1].title}
              </h2>
              <p className="page-item-info">
                <div className="page-item-sub">首席研究員：</div>
                香港大學社會工作及社會行政學系教授 陳凱欣教授
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">計劃統籌：</div>
                香港大學-瑪麗醫院輔助生育中心醫務社工 關彤姑娘
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">合作夥伴：</div>
                香港大學社會工作及社會行政學系<br></br>
                香港大學 - 瑪麗醫院輔助生育中心<br></br>
                中環街市<br></br>
                本地知名插畫師 Ahtsui 徐羨曾
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">醫生顧問：</div>
                香港大學臨床醫學學院婦產科學系臨床教授 吳鴻裕教授<br></br>
                香港大學臨床醫學學院婦產科學系臨床副教授 李幸奐教授
              </p>
            </div>
            <div className="page-item">
              <a name={"2"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[2].title}
              </h2>
              <p className="page-item-info">
                如有任何查詢，歡迎與計劃統籌關彤姑娘聯絡：<br></br>
                網站：<br></br>
                電郵：kwantess@hku.hk
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="page-bar">
        {detailList.map((e, i) => {
          const { titleBar, title, id } = e;
          return (
            <div
              style={{
                display: "flex",
                margin: barMargin,
                color: color,
                cursor: "pointer",
              }}
            >
              <div
                style={{
                  minWidth: "10px",
                  background: color,
                  borderRadius: "5px",
                  margin: "0 10px",
                }}
              ></div>
              {/* <div dangerouslySetInnerHTML={{ __html: titleBar }}></div> */}
              <a
                dangerouslySetInnerHTML={{ __html: titleBar }}
                href={"#" + i}
                style={{ color, textDecoration: "none" }}
              ></a>
            </div>
          );
        })}
      </div>
      <img
        className="page-close cursor-pointer"
        alt=""
        src={close}
        onClick={() => pathSwitch()}
      />
      <div className="page-detail-foot">
        <div className="gradual gradual-our"></div>
        <div className="detail-foot"></div>
        <div className="detail-floor"></div>
      </div>
      <div className="detail-wave">
        <div className="bg-wave bg-wave-l"></div>
        <div className="bg-wave bg-wave-our"></div>
      </div>
    </div>
  );
}

export default DetailOur;
